<template>
  <div class="pagination">
    <el-pagination background :current-page="currentPage" :page-sizes="[5, 7, 10, 15]" :page-size="currentSize" layout="total, sizes, prev, pager, next, jumper" :total="+searchTaskList.total" hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
// 封装全局组件
export default {
  name: 'Pagination',
  props: {
    searchTaskList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      currentPage: 1, // 当前页
      currentSize: 10 // 每一页占用多少
    }
  },
  methods: {
    handleSizeChange(value) {
      this.$emit('currentSizeChange', value)
    },
    handleCurrentChange(value) {
      this.$emit('currentPageChange', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  text-align: center;
}
::v-deep .el-pagination.is-background .el-pager li {
  margin: 0 10px;
}
</style>
